<template>
	<view>
		<u-navbar :is-back="true" title="个人简历"></u-navbar>
		<view class="resume">
			<view class="head">
				<view class="name">{{ user.nickName }}</view>
				<view class="avatar"><u-avatar :src="user.avatar" size="120" mode="square"></u-avatar></view>
			</view>
			<view class="main"></view>
			<view class="bottom">
				<view class="flex flex-align-center flex-pack-justify">
					<view class="addBox" ref="input"><view class="uploadtitle">上传简历附件</view></view>
					<h5 class="pdf">只支持上传pdf</h5>
					<view class="filesBox" v-if="fileList.length > 0">
						<view class="fileslist" v-for="(item, index) in fileList" :key="index">
							<image src="/static/img/upfile.png" class="upfileico"></image>
							<text class="upname">{{ item.name }}</text>
							<image src="/static/img/upclose.png" class="upclose" @click="delUpFile(item)"></image>
						</view>
					</view>
				</view>
			</view>
			<u-button @click="finish" type="primary">完成</u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			imageValue: [],
			fileList: [],
			token: '',
			user: {},
			resumeForm: {
				name: '',
				age: '',
				major: ''
			}
		};
	},
	onLoad() {
		this.user = JSON.parse(JSON.stringify(this.$store.getters.getStorageUser));
		console.log('user', this.user);
		this.token = this.$store.state.token || uni.getStorageSync('token');
	},
	mounted() {
		this.$nextTick(function() {
			var input = document.createElement('input');
			input.style.width = '100%';
			input.type = 'file'; //添加file类型
			input.multiple = 'multiple'; // 可以选择多个
			// input.accept=".pdf" // 限制只能上传PDF文件，可以不限制，能上传任何类型
			input.style.height = '100%';
			input.style.position = 'absolute';
			input.style.top = '0';
			input.style.right = '0';
			input.style.opacity = '0';
			input.style.overflow = 'hidden'; //防止注意input 元素溢出
			input.id = 'file';
			var _this = this;
			setTimeout(() => {
				this.$refs.input.$el.appendChild(input); // 这里可能会报$el找不到错误，所以加了延时器，报错的原因是this.$refs.input没有找到为null，所以需要等页面结构加载完后再将其添加进去
				input.onchange = event => {
					// 点击上传选择文件
					var file = event.target.files;
					console.log('file', file);
					if (_this.fileList.length == 0) _this.fileList.push(file[0]);
				};
			}, 1000);
		});
	},
	methods: {
		finish() {
			this.uploadAPI(this.fileList[0]);
		},
		uploadAPI(path) {
			if (!this.fileList.length) return;
			uni.showLoading({
				title: '上传中'
			});
			var _this = this;
			var fData = new FormData();
			fData.append('file', path);
			fData.append('moduleName', 'reports');
			var xhr = new XMLHttpRequest();
			var surl = 'http://b.ido.hpjpw.com/prod-api/ido/file/upload'; // 上传地址url
			xhr.open('POST', surl, true);
			xhr.onload = function(e) {
				console.log('上传成功', e); //上传成功
			};
			xhr.onreadystatechange = () => {
				if (xhr.readyState == 4 && xhr.status == 200) {
					//上传后台成功
					uni.hideLoading();
					var res = JSON.parse(xhr.responseText);
					console.log('res of file upload', res);
					// _this.fileList.push(res.datas); // 上传成功后放进fileList数组用于展示
				} else {
					uni.hideLoading();
				}
			};

			// 这里设置请求头，做的时候遇到一个问题，明明上传的是FormData，可是在请求中变成了request payload,后台需要的是FormData，解决方法，设置enctype为multipart/form-data，不要设置Content-Type，切记直接不设置Content-Type
			xhr.setRequestHeader('enctype', 'multipart/form-data');
			xhr.setRequestHeader('Authorization', this.token);
			xhr.send(fData);
		},
		delUpFile(data) {
			this.fileList = this.fileList.filter(item => item.id !== data.id);
		}
	}
};
</script>

<style lang="scss" scoped>
.addBox {
	width: 25%;
	height: 60rpx;
	text-align: center;
	// background: url(../../../../static/img/upload.png) no-repeat center center;
	position: relative;
	border: 1px dashed #1890ff;
	// margin: 0 auto;
	border-radius: 8px;
	background-color: #fafafa;
	// margin-bottom: 20rpx;
}
.pdf {
	margin: 10rpx;
}
// .addBox::after{
// 	content: '只支持上传pdf';
// 	position: relative;
// 	right: -60%;
// 	top: 5rpx;
// 	width: 200rpx;
// }
.uploadtitle {
	position: absolute;
	bottom: 12rpx;
	left: 0;
	right: 0;
}

.filesBox {
	margin-top: 28rpx;
}

.fileslist {
	margin: 8rpx;
	display: flex;
	align-items: center;
}

.upfileico {
	width: 30rpx;
	height: 30rpx;
	display: inline-block;
	vertical-align: top;
	margin-right: 10rpx;
}

.upname {
	font-size: 26rpx;
	color: #333333;
	width: 80%;
	display: inline-block;
}

.upclose {
	width: 30rpx;
	height: 30rpx;
	display: inline-block;
	// float: right;
	position: relative;
}
</style>
